<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯泡开关效果</title>
    <style>
        body {
            text-align: center; /* 使页面内元素水平居中 */
        }

        img {
            display: block; /* 将图片显示为块级元素 */
            margin: 0 auto; /* 让图片在其父元素中水平居中 */
            max-width: 200px; /* 设置图片的最大宽度为200像素 */
        }

        button {
            margin-top: 20px; /* 设置按钮的上外边距为20像素 */
            padding: 10px 20px; /* 设置按钮内边距，上下10像素，左右20像素 */
            font-size: 16px; /* 设置按钮文字的字体大小为16像素 */
        }
    </style>
</head>

<body>
    <!-- id为light-bulb的img标签用于显示灯泡图片，初始显示关灯状态的图片 -->
    <img id="light-bulb" src="img/off.jpg" alt="灯泡"> 
    <!-- 按钮，点击时调用toggleBulb函数实现图片切换 -->
    <button onclick="toggleBulb()">开关灯</button> 
    <script>
        function toggleBulb() {
            // 获取id为light-bulb的img元素
            var bulbImg = document.getElementById('light-bulb'); 
            // 判断当前图片路径是否为关灯图片的路径
            if (bulbImg.src.includes('img/off.jpg')) { 
                // 如果是，切换为开灯图片的路径
                bulbImg.src = 'img/on.jpg'; 
            } else {
                // 否则，切换回关灯图片的路径
                bulbImg.src = 'img/off.jpg'; 
            }
        }
    </script>
</body>

</html>